<template>
  <div class="dialog" v-if="form">
    <div class="title">业务系统基本信息</div>
    <div class="wrap1">
      <div>
        <div>系统名称:</div>
        <span>
          {{ form.projectname }}
        </span>
      </div>
      <div>
        <div>云服务商:</div>
        <span>{{ form.supplierName }}</span>
      </div>
      <div>
        <div>上线时间:</div>
        <span>{{ form.onlinetime }}</span>
      </div>
      <div>
        <div>上云区域:</div>
        <span>{{ translatecloudUpArea(form.cloudUpArea) }}</span>
      </div>
      <div>
        <div>业务部门:</div>
        <span>{{ form.officeName }}</span>
      </div>
      <div>
        <div>业主方联系人:</div>
        <span>{{ form.contactsNickName }}</span>
      </div>
      <div>
        <div>联系电话:</div>
        <span>{{ form.contactsinfo }}</span>
      </div>
      <div>
        <div>邮箱:</div>
        <span>{{ form.email }}</span>
      </div>
      <div style="width: 100%">
        <div>承建单位:</div>
        <span>{{ form.constunit }}</span>
      </div>
      <div>
        <div>承建方联系人:</div>
        <span>{{ form.constcts }}</span>
      </div>
      <div>
        <div>联系电话:</div>
        <span>{{ form.constctsinfo }}</span>
      </div>
      <div>
        <div>邮籍:</div>
        <span>{{ form.constemail }}</span>
      </div>
      <!-- <div style="width: 100%">
                <div style="width: auto">系统建设（运维）资金来源:</div>
                <span>{{ form.fundFrom }}</span>
            </div> -->
      <div style="width: 100%">
        <div style="width: auto">自行落实部门上云经费:</div>
        <span>{{ form.fundBySelf ? "是" : "否" }}</span>
      </div>
      <div style="width: 100%">
        <div>项目简介:</div>
        <span>{{ form.introduction }}</span>
      </div>
      <div style="width: 100%">
        <div>申请理由:</div>
        <span>{{ form.remarks }}</span>
      </div>
    </div>
    <div class="title">申请资源</div>
    <!-- <div style="width: 100%">
            <label style="margin-right: 10px">服务商:</label>
            <span>{{ form.cloudSupplier_label }}</span>
        </div> -->
    <div class="wrap">
      <div class="wrap_title">
        <div>服务器</div>
      </div>
      <div style="padding: 20px 20px; width: 100%">
        <el-table :data="form.hosts" style="width: 100%; margin-top: 13px">
          <el-table-column label="资源类型">
            <template slot-scope="scope">
              {{
                scope.row.flavorType == 1
                  ? "云服务器"
                  : scope.row.flavorType == 2
                  ? "高性能服务器"
                  : scope.row.serverCode
                  ? "数据库"
                  : "存储产品"
              }}
            </template>
          </el-table-column>
          <el-table-column label="实例名称">
            <template slot-scope="scope">
              <span v-if="scope.row.flavorType">{{ scope.row.hostName }}</span>
              <span v-else-if="scope.row.serverCode">{{
                scope.row.hostInstanceName
              }}</span>
              <span v-else-if="!scope.row.hostInstanceNames.length"></span>
              <div
                v-else
                style="margin-bottom: 6px"
                v-for="(item, index) in scope.row.hostInstanceNames"
                :key="index"
              >
                {{ item }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="资源详情">
            <template slot-scope="scope">
              <div
                v-if="form.oldform.hosts[scope.$index].flavorType"
                placement="top-start"
                width="300"
                trigger="hover"
              >
                <div style="margin-bottom: 6px">
                  <label>可用域：</label
                  >{{ form.oldform.hosts[scope.$index].availableDomain_label }}
                </div>
                <div
                  style="margin-bottom: 6px"
                  v-if="form.oldform.hosts[scope.$index].flavorType != 1"
                >
                  <label>资源类型：</label>
                  {{ form.oldform.hosts[scope.$index].cloudFlavorCode_label }}
                </div>
                <div
                  style="margin-bottom: 6px"
                  v-if="form.oldform.hosts[scope.$index].flavorType == 1"
                >
                  <label>规格：</label>
                  {{ form.oldform.hosts[scope.$index].cpuNumber }}核vCPU；{{
                    form.oldform.hosts[scope.$index].memorySize
                  }}G内存；
                </div>
                <div
                  style="margin-bottom: 6px"
                  v-if="form.oldform.hosts[scope.$index].flavorType == 2"
                >
                  <label>规格：</label
                  >{{ form.oldform.hosts[scope.$index].cloudFlavorCode_desc }}
                </div>
                <div
                  style="margin-bottom: 6px"
                  v-if="
                    form.oldform.hosts[scope.$index].flavorType == 1 &&
                    form.oldform.hosts[scope.$index].osDisk
                  "
                >
                  <label>系统盘：</label
                  >{{
                    form.oldform.hosts[scope.$index].osDisk
                      .diskServerCode_label ||
                    form.oldform.hosts[scope.$index].osDisk.diskServerName
                  }}，{{
                    form.oldform.hosts[scope.$index].osDisk.dataDiskSize
                  }}GB
                </div>
                <div style="margin-bottom: 6px">
                  <label>操作系统：</label>
                  <!-- {{ form.oldform.hosts[scope.$index].osName }} -->
                  {{
                    form.oldform.hosts[scope.$index].osName ||
                    osName(form.oldform.hosts[scope.$index].osServerCode)
                  }}
                </div>
                <div style="margin-bottom: 6px">
                  <label>
                    数据盘(共<span style="color: #e83112">{{
                      form.oldform.hosts[scope.$index].disks.length
                    }}</span
                    >块){{
                      form.oldform.hosts[scope.$index].disks.length ? ":" : ""
                    }}</label
                  >
                </div>
                <div
                  style="margin: 0 0 6px 16px"
                  v-for="(item, index) in form.oldform.hosts[scope.$index]
                    .disks"
                  :key="index"
                >
                  <span>{{
                    item.diskServerCode_label || item.diskServerName
                  }}</span
                  >，{{ item.dataDiskSize }}GB
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="变更后">
            <template slot-scope="scope">
              <div v-show="!scope.row.insStatus">未变更</div>
              <div
                v-show="
                  (scope.row.insStatus ? scope.row.insStatus : '') == 'REMOVE'
                "
              >
                已删除
              </div>
              <div v-show="form.hosts[scope.$index].insStatus == 'UPDATE'">
                <div
                  v-if="scope.row.flavorType"
                  placement="top-start"
                  width="300"
                  trigger="hover"
                >
                  <div style="margin-bottom: 6px">
                    <label>可用域：</label>{{ scope.row.availableDomain_label }}
                  </div>
                  <div
                    style="margin-bottom: 6px"
                    v-if="scope.row.flavorType != 1"
                  >
                    <label>资源类型：</label>
                    {{ scope.row.cloudFlavorCode_label }}
                  </div>
                  <div
                    style="margin-bottom: 6px"
                    v-if="scope.row.flavorType == 1"
                  >
                    <label>规格：</label>
                    <!-- {{ scope.row.cloudFlavorCode_desc }} -->
                    {{ scope.row.cpuNumber }}vCPU；
                    {{ scope.row.memorySize }}G内存
                  </div>
                  <div
                    style="margin-bottom: 6px"
                    v-if="scope.row.flavorType == 2"
                  >
                    <label>规格：</label>
                    <!-- {{ scope.row.cloudFlavorCode_desc }} -->
                    {{ scope.row.cloudFlavorCode_desc }}
                  </div>
                  <div
                    style="margin-bottom: 6px"
                    v-if="scope.row.flavorType == 1 && scope.row.osDisk"
                  >
                    <label>系统盘：</label
                    >{{ scope.row.osDisk.diskServerCode_label || "" }}，{{
                      scope.row.osDisk.dataDiskSize || 0
                    }}GB
                  </div>
                  <div style="margin-bottom: 6px">
                    <label>操作系统：</label
                    >{{ scope.row.osName || osName(scope.row.osServerCode) }}
                  </div>
                  <div style="margin-bottom: 6px">
                    <label>
                      数据盘(共<span style="color: #e83112">{{
                        scope.row.disks.length
                      }}</span
                      >块){{ scope.row.disks.length ? ":" : "" }}</label
                    >
                  </div>
                  <div
                    style="margin: 0 0 6px 16px"
                    v-for="(item, index) in scope.row.disks"
                    :key="index"
                  >
                    <span>{{
                      item.diskServerCode_label || item.diskServerName
                    }}</span
                    >，{{ item.dataDiskSize }}GB
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="wrap">
      <div class="wrap_title">
        <div>数据库</div>
      </div>
      <div style="padding: 20px 20px; width: 100%">
        <el-table :data="form.databases" style="width: 100%; margin-top: 13px">
          <el-table-column label="类型">
            <template slot-scope="scope">
              <span>{{
                scope.row.serverName || scope.row.serverCode_label
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="资源详情">
            <template slot-scope="scope">
              <div placement="top-start" width="300" trigger="hover">
                <div style="margin-bottom: 6px">
                  <label>类型：</label
                  >{{ form.oldform.databases[scope.$index].serverCode_label }}
                </div>
                <!-- <div style="margin-bottom: 6px">
                                   <label>版本：</label
                                   >{{ form.oldform.databases[scope.$index].databaseVersion }}
                               </div> -->
                <div style="margin-bottom: 6px">
                  <label>位数：</label
                  >{{ form.oldform.databases[scope.$index].systemDigits }}
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="变更后">
            <template slot-scope="scope">
              <div v-show="!scope.row.insStatus">未变更</div>
              <div
                v-show="
                  (scope.row.insStatus ? scope.row.insStatus : '') == 'REMOVE'
                "
              >
                已删除
              </div>
              <div v-show="form.databases[scope.$index].insStatus == 'UPDATE'">
                <div placement="top-start" width="300" trigger="hover">
                  <div style="margin-bottom: 6px">
                    <label>类型：</label
                    >{{ scope.row.serverCode || scope.row.serverName }}
                  </div>
                  <!-- <div style="margin-bottom: 6px">
                                   <label>版本：</label
                                   >{{ scope.row.databaseVersion }}
                               </div> -->
                  <div style="margin-bottom: 6px">
                    <label>位数：</label>{{ scope.row.systemDigits }}
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="wrap">
      <div class="wrap_title">
        <div>存储产品</div>
      </div>
      <div style="padding: 20px 20px; width: 100%">
        <el-table
          :data="form.storeProducts"
          style="width: 100%; margin-top: 13px"
        >
          <el-table-column label="磁盘类型">
            <template slot-scope="scope">
              {{ scope.row.diskServerCode_label }}
            </template>
          </el-table-column>
          <el-table-column label="磁盘用量">
            <template slot-scope="scope">
              <span> {{ scope.row.dataDiskSize }}GB </span>
            </template>
          </el-table-column>
          <el-table-column label="资源详情">
            <template slot-scope="scope">
              <div placement="top-start" width="300" trigger="hover">
                <div style="margin-bottom: 6px">
                  <label>存储类型：</label
                  >{{ form.oldform.storeProducts[scope.$index].productCode }}
                </div>
                <div style="margin-bottom: 6px">
                  <label>服务类型：</label
                  >{{ form.oldform.storeProducts[scope.$index].diskCode }}
                </div>
                <div style="margin-bottom: 6px">
                  <label>磁盘类型：</label
                  >{{ form.oldform.storeProducts[scope.$index].diskServerName }}
                </div>
                <div style="margin-bottom: 6px">
                  <label>磁盘用量：</label
                  >{{ form.oldform.storeProducts[scope.$index].dataDiskSize }}GB
                </div>
                <div style="margin-bottom: 6px">
                  <label>服务器：</label>
                  <div
                    v-for="item in form.oldform.storeProducts[scope.$index]
                      .hostIds"
                  >
                    {{ gethostName(item) }}
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="变更后">
            <template slot-scope="scope">
              <div v-show="!scope.row.insStatus">未变更</div>
              <div
                v-show="
                  (scope.row.insStatus ? scope.row.insStatus : '') == 'REMOVE'
                "
              >
                已删除
              </div>
              <div
                v-show="form.storeProducts[scope.$index].insStatus == 'UPDATE'"
              >
                <div placement="top-start" width="300" trigger="hover">
                  <div style="margin-bottom: 6px">
                    <label>存储类型：</label>{{ scope.row.productCode }}
                  </div>
                  <div style="margin-bottom: 6px">
                    <label>服务类型：</label>{{ scope.row.diskCode }}
                  </div>
                  <div style="margin-bottom: 6px">
                    <label>磁盘类型：</label
                    >{{
                      scope.row.diskServerCode_label || scope.row.diskServerName
                    }}
                  </div>
                  <div>
                    <label>磁盘用量：</label>{{ scope.row.dataDiskSize }}GB
                  </div>
                  <div style="margin-bottom: 6px">
                    <label>服务器：</label>
                    <div v-for="item in scope.row.hostIds">
                      {{ gethostName(item) }}
                    </div>
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="wrap">
      <div class="wrap_title">
        <div>安全产品</div>
      </div>
      <div style="padding: 20px 20px; width: 100%">
        <el-table
          :data="[].concat(form.safeProductsList)"
          style="width: 100%; margin-top: 13px"
        >
          <el-table-column label="序号" width="60px">
            <template slot-scope="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column label="产品名称">
            <template slot-scope="scope">
              {{ scope.row.productName }}
            </template>
          </el-table-column>
          <el-table-column label="数量">
            <template slot-scope="scope">
              {{ scope.row.ysnum }}
            </template>
          </el-table-column>
          <el-table-column label="变更后数量">
            <template slot-scope="scope">
              {{ scope.row.num == scope.row.ysnum ? "未变更" : scope.row.num }}
            </template>
          </el-table-column>
        </el-table>
        <!-- <el-table
                   :data="form.safeProducts"
                   style="width: 100%; margin-top: 13px"
               >
                   <el-table-column label="产品名称">
                       <template slot-scope="scope">
                           {{ scope.row.productName}}
                       </template>
                   </el-table-column>
                   <el-table-column
                       label="变更后"
                       class-name="small-padding fixed-width"
                   >
                       <template slot-scope="scope">
                           <span>{{scope.row.insStatus=='REMOVE'?'已删除':'未变更'}}</span>
                       </template>
                   </el-table-column>
               </el-table> -->
      </div>
    </div>
    <div v-if="otherFlag" class="title" style="margin-top: 30px">其他</div>
    <div v-if="otherFlag" class="wrap2" style="padding-top: 1px">
      <div style="display: flex">
        <span style="font-weight: bold; margin-right: 10px">说明:</span
        >{{ form.remark }}
      </div>
      <file-list
        ref="fileList"
        dontAction
        :fileList="form.fileList"
        @changeFileList="changeFileList"
        @upload="upload"
      />
    </div>
  </div>
</template>

<script>
import { getDicts } from "@/api/system/dict/data";
import fileList from "@/components/FileList/index.vue";
export default {
  name: "detail",
  components: { fileList },
  props: {
    configure: {
      type: Object,
      default: {},
    },

    otherFlag: {
      type: Boolean,
      default: true,
    },
    priceFlag: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      base_url: process.env.VUE_APP_BASE_API,
      dialogImageUrl: "",
      dialogVisible: false,
      cloud_up_areaList: [],
      form: null,
    };
  },
  created() {
    getDicts("cloud_up_area").then((response) => {
      this.cloud_up_areaList = response.data;
    });
  },
  methods: {
    childUpload() {
      this.$refs.fileList.upload();
    },
    upload(files) {
      this.$emit("upload", files);
    },
    gethostName(id) {
      let name = "";
      this.form.hosts.some((item) => {
        if (item.id == id) {
          name = item.hostName;
          return true;
        }
      });
      return name;
    },
    init(data) {
      this.form = data;
    },
    translatecloudUpArea(data) {
      var Name = "";
      this.cloud_up_areaList.forEach((item) => {
        if (item.dictValue == data) {
          Name = item.dictLabel;
        }
      });
      return Name;
    },
    osName(code) {
      let serviceName;
      this.configure.czxtList.forEach((item) => {
        if (item.code == code) {
          serviceName = item.serviceName;
        }
      });
      return serviceName;
    },
    //文件预览
    handlePictureCardPreview(url) {
      this.dialogImageUrl = url;
      this.dialogVisible = true;
    },
  },
};
</script>

<style scoped lang="scss">
.dialog {
  padding-right: 20px;
  font-size: 12px;
  .title {
    text-align: left;
    margin-bottom: 20px;
    font-size: 16px;
    font-weight: bold;
    padding-left: 4px;
    border-left: 4px solid #38b3aa;
  }
  .wrap {
    display: flex;
    background: #faf9ff;
    margin-top: 20px;
    border-radius: 10px;

    .wrap_title {
      padding: 0 10px;
      background: #f4f4f4;
      border-top-left-radius: 10px;
      border-bottom-left-radius: 10px;

      div {
        height: 100%;
        width: 14px;
        font-weight: bold;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
    }

    .wrap_item {
      display: flex;
      margin-top: 20px;

      div:first-child {
        width: 90px;
        font-weight: bold;
      }

      i {
        line-height: 28px;
        margin-right: 10px;
        font-size: 20px;
        color: #e83112;
      }
    }
  }
  .wrap1 {
    padding: 0 20px 20px 0px;
    background: #faf9ff;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 30px;
    padding-left: 20px;
    overflow-x: hidden;
    min-width: 1380px;
    // justify-content: space-between;
    border-radius: 10px;
    div {
      padding-top: 14px;
      width: 25%;
      // margin-left: 20px;
      min-width: 340px;
      display: flex;
      border-bottom: 1px solid rgba(192, 196, 204, 0.5);
      div {
        width: 100px;
        min-width: 100px;
        font-weight: bold;
        margin: 0;
        display: flex;
        padding-right: 10px;
        // justify-content: flex-end;
        color: #606266;
        border-bottom: 0px solid rgba(192, 196, 204, 0.5);
      }
      span {
        line-height: 48px;
      }
    }
  }
  .wrap2 {
    padding: 0 20px 20px 20px;
    background: #faf9ff;
    margin-bottom: 30px;
    justify-content: space-between;
    border-radius: 10px;
    div {
      margin-top: 20px;
    }
  }
  .wrap3 {
    padding: 20px;
    background: #faf9ff;
    margin-bottom: 30px;
    justify-content: space-between;
    border-radius: 10px;
  }
  .tab_wrap {
    display: flex;
    justify-content: space-between;
    div {
      width: 25%;
      padding: 10px 0;
    }
    div:first-child {
      font-weight: bold;
    }
  }
}
</style>
